<template>
    <div>
        <div class="font-19 sizeCenter colorFFF pb-20">我的订单</div>
        <div class="colorFFF flexSB">
            <div class="flexSB colorFFF mt-20" style="width: 350px">
                <div :class="{ selectBox: select == item.type }" :key="index" @click="select = item.type" class="flexSB colorFFF hand" style="width: 100px; padding: 8px" v-for="(item, index) in goodsType">
                    <img :src="item.icon" alt srcset width="25px" />
                    <span>{{ item.title }}</span>
                </div>
            </div>
            <div>
                <el-input placeholder="搜索订单号" style="width: 300px;margin-right: 30px;" v-model="keyword">
                    <div class="mt-12" slot="prefix">
                        <i class="iconfont icon-Magnifier color-999 font-22"></i>
                    </div>
                    <div class="cursor-pointer mr-10 mt-10" slot="suffix">
                        <span>|</span>
                        <span @click="
                        page = 1;
                        search();
                    " class="ml-6 font-14 color-fff">搜索</span>
                    </div>
                </el-input>
                <el-date-picker @change="start_timeFun" end-placeholder="结束日期" range-separator="至" start-placeholder="开始日期" type="daterange" v-model="times" value-format="yyyy-MM-dd"></el-date-picker>
            </div>
        </div>
        <customized ref="customized" v-if="select == 'customized'"></customized>
        <one-by-one ref="one_by_one" v-if="select == 'one_by_one'"></one-by-one>
        <same-city ref="same_city" v-if="select == 'same_city'"></same-city>
    </div>
</template>

<script>
import oneByOne from './one_by_one'
import sameCity from './same_city'
import customized from './customized'
export default {
    components: {
        oneByOne,
        sameCity,
        customized,
    },
    data() {
        return {
            keyword: '',
            query: {
                keyword: '',
            },
            times: '',
            goodsType: [
                {
                    icon: require('@/assets/goods/customized.png'),
                    title: '定制订单',
                    type: 'customized',
                },
                {
                    icon: require('@/assets/goods/one_by_one.png'),
                    title: '密聊订单',
                    type: 'one_by_one',
                },
                {
                    icon: require('@/assets/goods/same_city.png'),
                    title: '同城订单',
                    type: 'same_city',
                },
            ],
            select: 'customized',
        }
    },
    mounted() {
        document.title = '陪秀-我的订单'
    },
    methods: {
        search() {
            let activeName = this.$refs[this.select].activeName
            let current_module = this.$refs[this.select].$refs['way' + activeName]
            current_module.page = 1
            current_module.query.keyword = this.keyword
            current_module.loading = false
            this.$nextTick(() => {
                current_module.beforeInit() //重新请求数据
            })
        },

        start_timeFun(e) {
            console.log(e)
            let activeName = this.$refs[this.select].activeName
            let current_module = this.$refs[this.select].$refs['way' + activeName]
            current_module.query.start_time = e[0]
            current_module.query.end_time = e[1]
            current_module.page = 1
            current_module.loading = false
            current_module.beforeInit() //重新请求数据
        },
    },
}
</script>

<style lang="scss" scoped>
.selectBox {
    border: 1px solid #ffc9dc;
    border-radius: 10px;
    // box-sizing: border-box;
}

.selectType {
    border-radius: 50px;
    background-color: #272337;
    // box-sizing: border-box;
}

/deep/.el-tabs__nav.is-stretch {
    min-width: auto !important;
    width: 80%;
    margin-left: 10%;
}

/deep/.el-tabs__item {
    font-size: 17px !important;
    color: #c7c7c7 !important;
}

/deep/.el-tabs__item.is-active {
    color: #ffffff !important;
}

/deep/.el-tabs__active-bar {
    background-color: #ffffff !important;
}

/deep/.el-tabs__nav-wrap::after {
    background: rgba(255, 255, 255, 0.1) !important;
    height: 1px !important;
}
/deep/.el-input__inner {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
/deep/.el-range-input {
    background: transparent;
}
/deep/.el-input__inner,
/deep/.el-range-input {
    color: #fff;
}
</style>